<template>
	<view class="wtemp-box">
		<view class="wtemp-items">
			<view class="wtemp-item" v-for="(item,index) of scaleList" :key="index">
				<view class="item-lab">
					{{item.num}}℃
				</view>
				<view class="item-dot"></view>
			</view>
			<!-- <view class="wtemp-item">
				<view class="item-lab">
					10℃
				</view>
				<view class="item-dot"></view>
			</view>
			<view class="wtemp-item">
				<view class="item-lab">
					20℃
				</view>
				<view class="item-dot"></view>
			</view>
			<view class="wtemp-item">
				<view class="item-lab">
					30℃
				</view>
				<view class="item-dot"></view>
			</view>
			<view class="wtemp-item">
				<view class="item-lab">
					40℃
				</view>
				<view class="item-dot"></view>
			</view>
			<view class="wtemp-item">
				<view class="item-lab">
					{{maxTemp}}℃
				</view>
				<view class="item-dot"></view>
			</view> -->
			 
		</view>
		<view class="wtemp-bar">
			<view class="bar-slider" :style="[sliderStyle]">
				<u-icon name="pause"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			
			
		};
	},
	props: {
		tempNumber: {
			type: [Number, String],
			default: 30
		},
		// minTemp: {
		// 	type: [Number, String],
		// 	default: 0
		// },
		// maxTemp: {
		// 	type: [Number, String],
		// 	default: 50
		// },
		scaleList: {
			type: Array,
			default() {
				return [
					{
						num:0
					},
					{
						num:10
					},
					{
						num:20
					},
					{
						num:30
					},
					{
						num:40
					},
					{
						num:50
					}
				];
			}
		},
	},
	 
	computed: {
		sliderStyle() {
			let minNum = this.scaleList[0].num;
			let maxNum = this.scaleList[this.scaleList.length-1].num;
			let style = {};
			style.left = (this.tempNumber/(maxNum - minNum)) * 100 + '%';
			return style;
		}
	},
	created() {
		 
	},
	methods: {
		 
	}
};
</script>

<style lang="scss" scoped>
	 
	.wtemp-box{
		position: relative;
	}
	.wtemp-bar{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 48upx;
		height: 48upx;
		.bar-slider{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48upx;
			height: 48upx;
			color: #00e6c3;
			border-radius: 10upx;
			font-size: 24upx;
			background-color: #fff;
			box-shadow: 0 2upx 26upx 0 rgba(197, 211, 238, 0.23);
			transition: all .3s ease;
		}
	}
	.wtemp-items{
		display: flex;
		justify-content: space-between;
		margin-left: -30upx;
		margin-right: -30upx;
	}
	.wtemp-item{
		flex: 1;
		min-width: 0;
		text-align: center;
		
		.item-lab{
			margin-bottom:12upx;
			font-size: 24upx;
			color: $u-content-color;
		}
		.item-dot{
			height: 48upx;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			&::after{
				position: absolute;
				content: " ";
				display: block;
				height: 16upx;
				width: 16upx;
				border-radius: 100%;
				background-color: #ffffff;
				border: 4upx solid #c5d3ee;
				box-sizing: border-box;
				left: 50%;
				top: auto;
				margin-left: -8upx;
			}
			&::before{
				position: relative;
				content: " ";
				display: block;
				height: 6upx;
				width: 100vw;
				background-color: #c5d3ee;
				box-sizing: border-box;
			}
		}
		&:first-child{
			// text-align: left;
			.item-dot{
				&::before{
					left: 50%;
				}
				&::after{
					// left: 16upx;
					// margin-left: 0;
				}
			}
		}
		&:last-child{
			// text-align: right;
			.item-dot{
				&::before{
					right: 50%;
				}
				&::after{
					// left: auto;
					// right: 16upx;
					// margin-left: 0;
				}
			}
		}
	}
</style>
